<template>
  <div id="app">
    <VHeader></VHeader>
    <transition mode="out-in" name="fade">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
import VHeader from '@/components/Header';
// import anime from 'animejs';
export default {
  name: 'app',
  components: {
    VHeader
  },
  methods: {
    enter(el,done){
      anime.remove(el);
      anime({
          targets: el,
          opacity: 1,
          translateX: 0,
          easing: 'easeOutQuint',
          duration: 200,
          complete: done
      });
    },
    leave(el,done){
      anime.remove(el);
      anime({
          targets: el,
          opacity: 0,
          translateX: -100,
          easing: 'easeOutQuint',
          duration: 300,
          complete: done
      });
    },
    afterLeave(el){
      el.style.opacity = 0;
      el.style.translateX = 100;
    }
  }
}
</script>

<style>
#app {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.fade-enter-active, .fade-leave-active {
  transform: translateX(0);
  transition: opacity .5s, transform .6s ease-in-out;
}
.fade-leave-active {
  opacity: 0;
  transform: translateX(-100px);
}
.fade-enter {
  opacity: 0;
  transform: translateX(100px);
}
</style>
